<template>
	<div>
	<div class="banner">
	<!-- 头部导航	 -->
		<!-- banner图	 -->
	
		<div class="datu">
				<Swiper style="position: relative;">
			<div class="img swiper-slide" v-for="item in banner" :key="item" >
				<p>{{msg}}</p>
				<img :src="item" >
				<div class="swiper-button-next" style="width: 150px;"></div>
				<div class="swiper-button-prev" style="width: 150px;"></div>
				</div>
				</Swiper>	
			</div>	
	<!-- 圆点	 -->

</div>
<div class="main">
<div class="list1 clearfix">
<p>11月30日，晴，29°C</p>
<div style="width: 100%;height:80px;display: flex;justify-content: space-between;overflow: hidden;padding-top: 20px;">
<div class="left">
	<span style="line-height: 80px;font-size: 16px;margin-left: 40px;font-weight: 800;color: white;">开启您的梦想假期</span>
<input type="date" value="2021-11-29">	
</div>	
<div class="right">
	开启行程>
</div>
</div>
<div class="list-t">
<div class="list_tu" v-for="(item,index) in three" :key="item" >
	<img :src="item" >	
	<p>{{title[index]}}</p>	
</div>
</div>	
</div>		
</div>
<div class="bgback">
<div class="bgimg">
<img src="../assets/images/1535421915194.jpg" >
<div class="first">
	<p style="font-size:64px ;font-family: 宋体;">农趣</p>
	<p style="margin-top: 24px;">在CCO的陪伴指导下</p>
	<p style="margin-top: 24px;">荷塘垂钓，深度农耕，享受农事乐趣</p>
	<p style="margin-top: 24px;">游客可亲自下地采摘蔬菜，享用自己的劳动果实</p>
	<button style="background-color:#245B65 ;">体验农趣</button>
	<button style="background-color:#4F7334 ; margin-left: 15px;">了解乌村</button>
</div>
</div>
<div class="bgimg">
<img src="../assets/images/1535421957058.jpg" >
<div class="scend">
	<p style="font-size:64px ;font-family: 宋体;">童趣</p>
	<p style="margin-top: 24px;">对小朋友，乌村设置了很多丰富有趣体验</p>
	<p style="margin-top: 24px;">大人在陪同孩子体验这些活动的同时</p>
	<p style="margin-top: 24px;">也能找回你童年的纯真与快乐</p>
	<button style="background-color:#245B65 ;">探索童趣</button>
	<button style="background-color:#4F7334 ; margin-left: 15px;">更多体验</button>
</div>
</div>
<div class="bgimg">
<img src="../assets/images/1535422023630.jpg" >
<div class="third">
	<p style="font-size:64px ;font-family: 宋体;">食趣</p>
	<p style="margin-top: 24px;">购买一价全包产品</p>
	<p style="margin-top: 24px;">在乌村尽享当地美食，甜品、小食吃个够</p>
	<p style="margin-top: 24px;">更有总厨私房菜可供选择预约</p>
	<button style="background-color:#245B65 ;">品味食趣</button>
	<button style="background-color:#4F7334 ; margin-left: 15px;">更多体验</button>
</div>
</div>	
</div>
<div class="strategy">
<h3>攻略&体验专辑</h3>
<ul class="tiyan" >
	<li style="width: 50%;height: 100%;">
	<img src="../assets/images/1616418680970.jpg" >	
	<p style="background-color:#245B65 ;line-height: 40px;font-size: 16px;padding: 0 10px;">来乌村，和春天撞个满怀</p>	
	</li>
	<li style="width: 50%;">
	<ul style="height: 50%;">
		<li style="width: 50%;height: 198px;">
		<img style="width: 100%;height: 100%;" src="../assets/images/1611884476173.jpg" >	
	<p>乌村|春节计划</p>		
		</li>
		<li style="width: 50%;height: 198px;">
		<img style="width: 100%;height: 100%;" src="../assets/images/1611381790355.jpg" >
		<p>乌村|春节计划</p>	
			
			
		</li>
	</ul>
	<ul style="height: 50%;">
		<li style="width: 50%;height: 198px;">
		<img style="width: 100%;height: 100%;" src="../assets/images/1611380488585.jpg" >	
	<p>乌村|春节计划</p>		
		</li>
		<li style="width: 50%;height: 198px;">
		<img style="width: 100%;height: 100%;" src="../assets/images/1611366836682.jpg" >
		<p>乌村|春节计划</p>	
				
		</li>
	</ul>	
	</li>
</ul>
<h3 style="font-size: 48px;color: #345B5E;line-height: 64px;padding: 100px 0 50px 0;font-family: 宋体;">关注乌村,正在进行</h3>	

<div class="lunbo" >
<div style="width: 2820px;height: 252px;display: flex;justify-content: space-between;">
<div class="kuai" v-for="(item,int) in scrool" :key="int">

	<img :src="item" >
	<p>乌村|理想的稻米</p>
</div>	
</div>
</div>
<div class="yuan" style="margin-bottom: 100px;">
	<span style="background-color: yellow;"></span>		
	<span></span>		
	<span></span>		
	<span></span>		
</div>
</div>


</div>

</template>

<script>
	import Swiper from '../components/swi.vue'
	export default{
		name:'Home',
		components:{Swiper},
		data(){
			return{
			msg:"乡野农趣·乐在乌村",	
			current:0,
			num:0,
			banner:[
				require("../assets/images/1522210714334.jpg"),
				require("../assets/images/1515644642261.jpg"),
				require("../assets/images/1517642017418.jpg"),
				require("../assets/images/1522211988996.jpg")
			],
			three:[
				require("../assets/images/1635904724987.jpg"),
				require("../assets/images/1537874662558.jpg"),
				require("../assets/images/1624178308959.jpg"),
			],
			title:[
				"双11乌村豪华房一价全包",
				"乌村生态观光游 ￥50/人起",
				"乌村住宿一价全包￥1170起"
			],
		scrool:[
			require("../assets/images/1611381790355.jpg"),
			require("../assets/images/1611366836682.jpg"),
			require("../assets/images/1611366340532.jpg"),
			require("../assets/images/1611365860094.jpg"),
			require("../assets/images/1599546513350.jpg"),
			require("../assets/images/1605600893659.jpg"),

		]	
			}
		},
		methods:{
			auto(){
			setInterval(()=>{
					this.current++;
					if(this.current>this.banner.length-1){
						this.current=0
					}
				},2000)
			},
			created(){
				this.auto();
			},
			chance(index){
			this.current = index;
			},
			
		}
	}
</script>

<style scoped="scoped">
body{
	background-color: #F9F8F2;
	overflow-x: hidden;
}
.datu{
	width: 100%;

	margin: 0 auto;
	height: 950px;
	overflow: hidden;
	white-space: nowrap;
}
.banner{
position: relative;
overflow: hidden;
}
.header{
	width: 1400px;
	height: 90px;
	left: 50%;
	transform: translatex(-50%);
	position: absolute;
	z-index: 10;
	padding: 10px 20px;
}
.header img {
	float: left;
	height: 100%;
}
.datu .img{
display: inline-block;
position: relative;
width: 100%;
height: 100%;
  }
.datu .img img{
	width: 100%;
	height: 100%;
}
.datu .img p{
	color: white;
	  position: absolute; 
	top:50% ;left: 50%;
	transform: translate(-50%,-50%);
	font-family: 宋体;
	font-size: 60px;
}
.header .num{
	font-size: 18px;
	line-height: 90px;
	margin-right: 50px;
}
.dlzc{
	line-height: 90px;
	height: 90px;
	float: right;
	display: flex;
	margin-right: 50px;
	align-items: center;
}
.dlzc>img{
	width: 32px;
	height: 32px;
 padding-right: 10px;
}
.yuandian {
	display: flex;
	justify-content: space-around;
	width: 180px;
	height: 30px;
	position: absolute;
	bottom: 240px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
.yuandian span{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #FFFFFF;
	z-index: 100;
}
.yuandian>.active{
	background-color: red;
}
.main{
	position: relative;
	top: -220px;
	width: 100%;
	z-index: 100;


}
.list1{
	width: 1410px;
	margin: 0 auto;

}
.list1 p {
	font-size: 18px;
  float: right;
	color: white;

}
.left{
	width: 80%;
	height: 80px;
	background-color: #094550;
	
}
.left input{
	width: 200px;
	height: 30px;
	margin-left: 30px;
	outline: none;
	border: none;
	border-radius: 10px;
}
.right{
	width: 20%;
	height: 80px;background-color: #DF482B;
	color: white;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
}
.list-t{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.list_tu{
	display: inline-block;
	width: 30%;
}
.list_tu img{
	width: 100%;
	height: 250px;
}
.list_tu p {
	color: black;
	text-align: center;
	width: 100%;
	font-size: 16px;
	line-height: 24px;
	padding: 14px 0;
	border-bottom: 1px solid #C1C1BF;
}
.bgimg{
	position: relative;
	margin: 0 auto;
	width:2545px ;
}
.bgback{
	width: 100%;
	margin-top: -130px;
}
.first{
	position: absolute;
	left: 180px;
	top: 80px;
}
.bgimg button{
	width: 130px;
	height: 50px;
	border-radius: 32.5px;
	border: none;
	font-size: 18px;
	color: white;
	margin-top: 40px;
}
.scend{
	position: absolute;
	right: 180px;
	top: 80px;
}
.third{
	position: absolute;
	left: 180px;
	top: 80px;
}
.strategy{
	width: 1410px;
	margin: 0 auto;
	
}
.strategy h3{
	font-size: 54px;
	padding: 100px 0 50px 0;
	font-family: 宋体;
	color: #345B5E;
}
.tiyan{
	width: 100%;
	height: 400px;
}
.tiyan li{
	float: left;
}
.tiyan img{
	width: 100%;
	height: 100%;
}
.tiyan p{
	line-height: 40px;
	background-color:#345B5E ;
	font-size: 16px;
	padding: 2px 10px;
	
}
.lunbo{
	white-space: nowrap;
	overflow: hidden;
	
}
.lunbo .kuai{
	width: 425.5px;
	height: 252px;
	display: inline-block;

}
.kuai p{

line-height: 40px;
	background-color:#345B5E ;
	font-size: 16px;
	padding: 2px 10px;	
}
.yuan{
	width: 150px;
	height: 30px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	margin-top: 30px;
}
.yuan>span{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color:#E2E2E0;
}
.foot-top{
	width: 1410px;
	height: 100px;
	margin: 0 auto;
	background-color: #094550;
	margin-top: 50px;
	
}
.foot-top ul li img{
	width: 32px;
}
.foot-top ul li span{
	font-size: 16px;
	padding: 0 5px;
}
.foot-top ul li{
	float: left;
	width: 33%;
	text-align: center;
	line-height: 100px;
}
.footer{
	width: 1350px;
	margin: 0 auto;
	background-color: #00455B;
		padding: 15px 30px;

		border-bottom: 1px solid white;
}
.map{
	width: 1410px;
	margin: 0 auto;

}
.logo{
	display: inline-block;
	float: left;
}
.col-lg-2{
	display: inline-block;
	float: left;
	margin-left: 150px;
}
.col-lg-2 ul li{
	padding: 8px 0;
	

}
.bm-view{
	width: 100%;
	height: 300px;
}
.col-lg-2 ul li p{
color: #809899;
}
.col-lg-2 ul li a{
	color: #809899;
}
.di{
	width: 1410px;
	margin: 0 auto;
	background-color:#00455B ;
	height: 70px;
	text-align: center;
	line-height: 70px;
	color: #809899; 
}




	
</style>
